<template>
	<scroll-view class='chat-wrap-box'>
		<view class="main" :style="'transform: translateY('+scrollHeight+'rpx);'">
				<chat-suit-audio ref="audio" :username="username" :chatType="chatType" @newAudioMsg="saveSendMsg"></chat-suit-audio>
				<scroll-view style="height:calc(100vh - 88rpx)" :scroll-y="true" @tap="closeAllFunBox" @scrolltoupper="getMoreMessage">
					<chat-msglist ref="msglist" :username="username"  :reciveScrollTop="reciveScrollTop"></chat-msglist> 
				</scroll-view>
				<!-- <chat-msglist ref="msglist" :username="username" @msglistTap="normalScroll" :reciveScrollTop="reciveScrollTop"></chat-msglist> -->
				<chat-inputbar ref="inputbar" :username="username" :chatType="chatType" @openMoreBox="openMoreBox" @closeMoreBox="closeMoreBox"
				 @openEmojiBox="openEmojiBox" @closeEmojiBox="closeEmojiBox" @newTextMsg="saveSendMsg" @newImageMsg="saveSendMsg"
				 @newLocationMsg="saveSendMsg" @newVideoMsg="saveSendMsg" @tapSendAudio="toggleRecordModal" @inputFocused="shortScroll"
				 @inputBlured="normalScroll" @gotoMember="gotoMember" :selectMember="selectMember"></chat-inputbar>
		</view>
	</scroll-view>

	<!-- aaa  {{reciveScrollTop.top}} bbb {{username.your}} ccc  {{chatType}} -->
	<!-- <view class="main">
				<chat-suit-audio
					ref="audio"
					:username="username"
					:chatType="chatType"
					@newAudioMsg="saveSendMsg"></chat-suit-audio>
			
				<chat-msglist
					ref="msglist"
					:username="username"
					@msglistTap="normalScroll" :reciveScrollTop="reciveScrollTop"></chat-msglist>
			</view>
				<chat-inputbar
					ref="inputbar"
					:username="username"
					:chatType="chatType"
			
					@newTextMsg="saveSendMsg"
					@newImageMsg="saveSendMsg"
					@newLocationMsg="saveSendMsg"
					@newVideoMsg="saveSendMsg"
					@tapSendAudio="toggleRecordModal"
			
					@inputFocused="shortScroll"
					@inputBlured="normalScroll"></chat-inputbar>
		</view> -->
</template>

<script>
	import chatMsglist from "@/comps/chat/msglist/msglist.vue";
	import chatInputbar from "@/comps/chat/inputbar/inputbar.vue"
	import chatSuitAudio from "@/comps/chat/inputbar/suit/audio/audio.vue"

	let msgStorage = require("./msgstorage");
	let msgType = require("./msgtype");
	export default {
		components: {
			chatMsglist,
			chatInputbar,
			chatSuitAudio,
			
		},
		props: {
			username: {
				type: Object,
				value: {},
			},
			chatType: {
				type: String,
				value: msgType.chatType.SINGLE_CHAT,
			},
			reciveScrollTop: {
				type: Object,
				value: {}
			},
			selectMember:{
				type: Object,
				value:null,
			},
		},
		watch:{
			selectMember(newValue){
				console.log(newValue)
				return newValue
			},
		},
		data() {
			return {
				scrollHeight: 0,
				isShowMoreBox: false,
				isShowEmojiBox: false,
				
			}
		},
		created() {
			// console.log('进来得到参数值');
			// console.log(JSON.stringify(this.username));
			// console.log(JSON.stringify(this.chatType));
			// console.log(JSON.stringify(this.reciveScrollTop));
			uni.$on('saveSendMsg', (data) => {
				this.saveSendMsg(data);
			})
		},
		beforeDestroy() {
			uni.$off('saveSendMsg');
		},

		onReady() {

		},
		methods: {
			gotoMember(){
				this.$emit("gotoMember")
			},
			getMoreMessage(){
				this.$refs.msglist.getMoreMessage();	
			},
			toggleRecordModal() {
				this.$refs.audio.toggleRecordModal();
			},

			normalScroll() {
				console.log('chat的normalScroll');
				this.$refs.msglist.normalScroll();
				this.$refs.inputbar.cancelEmoji();
			},
			openMoreBox() {
				console.log("执行")
				this.isShowMoreBox = true;
				this.scrollHeight = -460
			},
			closeMoreBox() {
				console.log("执行")
				this.isShowMoreBox = false;
				this.scrollHeight = 0;
			},
			openEmojiBox() {
				console.log("执行")
				this.isShowEmojiBox = true;
				this.scrollHeight = -460
			},
			closeEmojiBox() {
				console.log("执行")
				this.isShowEmojiBox = false;
				this.scrollHeight = 0;
			},
			closeAllFunBox(){
				this.closeEmojiBox();
				this.closeMoreBox()
			},
			shortScroll() {
				this.$refs.msglist.shortScroll();
			},

			saveSendMsg(data) {
				msgStorage.saveMsg(data.msg, data.type);
				// return;
				// this.data.__comps__.inputbar.cancelEmoji();
			},

			getMore() {
				this.$refs.msglist.getHistoryMsg()
			},
		}
	}
</script>

<style>
	.chat-wrap-box {
		width: 100vw;
		height: 100vh;
		/* overflow: hidden; */
	}

	.main {
		/* 	display: flex;  
		flex-direction: column; */
		/* justify-content: flex-end; */
		width: 100vw;
		/* height:calc(100vh - 88upx); */
		/* padding-bottom: 88upx; */
		transition: all .2s linear;

		/* height: 100vh; */
	}

	/*设置msg样式*/
	@keyframes moreBoxSlider {
		from {
			transform: translateY(0);
		}

		to {
			transform: translateY(-460upx);
		}
	}

	@keyframes moreBoxSliderClose {
		from {
			transform: translateY(-460upx);

		}

		to {
			transform: translateY(0);
		}
	}

	@keyframes emojiSlider {
		from {
			bottom: -300upx;
		}

		to {
			bottom: 0upx;
		}
	}

	.moreBox-slider-animation {
		animation: moreBoxSlider .1s forwards;
	}

	.moreBoxClose-slider-animation {
		animation: moreBoxSliderClose .1s forwards;
	}

	.emoji-slider-animation {
		animation: emojiSlider .1s;
	}

	.chat-room-top {
		/* height:100vh;
		box-sizing: border-box; */
		/* height:calc(100vh - 88upx); */
		/* padding-bottom: 88upx; */
	}

	.chat-room-bottom {
		/* position: fixed;
		width: 100%;
		bottom: 0upx; 
		left: 0; */
		/* height:88upx; */
	}
</style>
